<!-- 此路由可作为父类路由通用路由页面使用 如需自定义父类路由页面 请参考 @/view/superAdmin/index.vue -->
<template>
  <q-page padding :style-fn="予样式">
    <slot></slot>
  </q-page>
</template>

<script setup>
import use路由 from '@/hooks/use路由';
const 路由 = use路由();
import * as em from "@/enums"
const props = defineProps({
  是列表页: {
    type: Boolean,
    default: true
  },
  固定高度: {
    type: Boolean,
    default: false
  },
  有工具栏: {
    type: Boolean,
    default: true
  },
})
const { 有工具栏 } = props
function 予样式(offset) {
  // console.log(`offset 👉`, offset)
  // "offset" 是一个数字（像素），
  //它表示基于 QLayout "view" 属性配置的
  //屏幕上页眉+页脚的总高度

  // 这实际上是 Quasar 中默认的 style-fn 的功能如下
  // return { minHeight: offset ? `calc(100vh - ${offset}px)` : '100vh' }
  let 距头高度 = 80
  // console.log(`路由.a.页面类型 👉`, 路由.a.页面类型)
  let style = {}
  // const 固定高度 = props.固定高度 || 路由.a.页面类型 == '列表'
  let 固定高度 = false

  switch (路由.a.页面类型) {
    case em.页面类型.详情:
      break;
    case em.页面类型.看板:
      break;
    case em.页面类型.列表:
      固定高度 = true
      距头高度 = 40
      break;
    case em.页面类型.固定高度:
      固定高度 = true
      距头高度 = 40
      break;
    default:
      距头高度 = 40
      break;
  }

  // console.log(`距头高度 👉`, 距头高度)

  if (固定高度) {
    style = {
      height: offset ? `calc(100vh - ${offset}px)` : '100vh',
      overflowX: 'hidden',
      padding: `${距头高度}px 10px 10px`
    }
  } else {
    // 距头高度 = 80
    // if (!有工具栏) {
    //   距头高度 = 50
    // }
    style = { padding: `${距头高度}px 10px 10px` }
  }
  return style
}
</script>
<!-- <style lang="scss">
.q-layout-padding {
    padding: 80px 10px 10px;
}
</style> -->